<script setup lang="ts">
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts'

let bgColor = '#545061';
let title = '销售额';
let color = ['#c065e7', '#765deb', '#3862d8', '#6a89E2', '#219CF9', '#6efbbf', '#40c057', '#ffd351', '#ff8e43', '#f56b6d'];
let echartData = [
  {
    name: "户外",
    value: 10
  },
  {
    name: "心脏",
    value: 5
  },
  {
    name: "功能",
    value: 10
  },
  {
    name: "团体",
    value: 10
  },
  {
    name: "力量",
    value: 15
  },
  {
    name: "有氧",
    value: 25
  },
  {
    name: "竞赛",
    value: 15
  },
  {
    name: '柔性',
    value: 10
  }
];

let formatNumber = function (num) {
  let reg = /(?=(\B)(\d{3})+$)/g;
  return num.toString().replace(reg, ',');
}

// 挂载的ref
const echart = ref()
onMounted(() => {
  const myCharts = echarts.init(echart.value)
  const option = {
    backgroundColor: bgColor,
    color: color,
    tooltip: {
      trigger: 'item'
    },
    title: [{
      text: '课程',
      top: 'center',
      left: 'center',
      textStyle: {
        fontSize: 20,
        color: '#ffffff',
        fontWeight: 400
      },
    }],
    series: [{
      type: 'pie',
      roseType: 'radius',
      radius: ['25%', '40%'],
      center: ['50%', '50%'],
      data: echartData,
      hoverAnimation: false,
      itemStyle: {
        normal: {
          borderColor: bgColor,
          borderWidth: 2
        }
      },
      label: {
        normal: {
          formatter: params => {
            return (
                '{icon|●}{name|' + params.name + '}\n{value|' +
                formatNumber(params.value) + '}'
            );
          },
          rich: {
            icon: {
              fontSize: 16,
              color: 'inherit'
            },
            name: {
              fontSize: 18,
              padding: [0, 0, 0, 10],
              color: '#fff'
            },
            value: {
              fontSize: 14,
              fontWeight: 'bolder',
              padding: [10, 0, 0, 20],
              color: 'inherit'
              // color: '#333333'
            }
          }
        }
      },
    }]
  };
  myCharts.setOption(option)
})
</script>

<template>
  <div class="box center">
    <div class="box-body">
      <div class="charts" ref="echart">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;

  .box-body {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    box-shadow: 2px 1px 8px 2px rgb(123, 173, 222);
    background-color: #555162;

    .charts {
      width: 100%;
      height: 100%;
    }
  }
}
</style>